<template>
  <view class="placeholder-image" :class="[shape, mode]" :style="imageStyle">
    <text v-if="text" class="placeholder-text">{{ text }}</text>
  </view>
</template>

<script setup>
import { computed } from "vue";

// 组件属性
const props = defineProps({
  // 宽度
  width: {
    type: [String, Number],
    default: "100%",
  },
  // 高度
  height: {
    type: [String, Number],
    default: "100%",
  },
  // 背景色
  bgColor: {
    type: String,
    default: "#5a8dee",
  },
  // 显示文本
  text: {
    type: String,
    default: "",
  },
  // 文本颜色
  textColor: {
    type: String,
    default: "#FFFFFF",
  },
  // 形状：'square', 'circle', 'rounded'
  shape: {
    type: String,
    default: "rounded",
  },
  // 显示模式：同uni-app的image组件的mode属性
  mode: {
    type: String,
    default: "aspectFill",
  },
});

// 计算样式
const imageStyle = computed(() => {
  const style = {
    width: typeof props.width === "number" ? `${props.width}rpx` : props.width,
    height:
      typeof props.height === "number" ? `${props.height}rpx` : props.height,
    backgroundColor: props.bgColor,
    color: props.textColor,
  };

  return style;
});
</script>

<style lang="scss" scoped>
.placeholder-image {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: $color-medical-blue;
  position: relative;

  &.square {
    border-radius: 0;
  }

  &.rounded {
    border-radius: $uni-border-radius-base;
  }

  &.circle {
    border-radius: 50%;
  }

  &.aspectFill,
  &.aspectFit {
    background-size: cover;
    background-position: center;
  }

  &.widthFix {
    height: auto;
  }

  &.heightFix {
    width: auto;
  }
}

.placeholder-text {
  font-size: $uni-font-size-base;
  color: #ffffff;
  text-align: center;
  padding: 0 $spacer-2;
}
</style>
